<template>
  <div>

    <Row>

      <i-col>
        <Form label-position="right" inline>
          <FormItem :label="lableName">
            <Select ref="selectInput" v-model="queryParam.like" placeholder="请输入查询条件" filterable clearable
                    style="width: 200px;">
              <Option v-for="item in selectList" :value="item.val" :key="item.listName">
                {{item.listName}}
              </Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSearch" icon="ios-search">
              搜索
            </Button>
          </FormItem>

        </Form>
      </i-col>
    </Row>
    <Row>
      <i-col span="24">
        <Tabs v-model="currentTab.index" @on-click="switchTab">
          <template v-for="item in tabList">
            <TabPane :label="item.label" :name="item.val"></TabPane>
          </template>
        </Tabs>

        <!--车队-->
        <tablePage ref="inspectionTab" :api="getOwnFleetWithPage" :param="queryParam" sort-name="id"
                   sort-type="desc" :isStartLoad="true" v-if="currentTab.index==tabList[0].val" @pageChangeIndex="pageChangeIndex">
          <template slot-scope="props">
            <Table :columns="fleetColumn" :data="props.data" @on-sort-change="props.sortChange"
                   border></Table>
          </template>
        </tablePage>

        <!--司机-->
        <tablePage ref="inspectionTab" :api="getOwnFleetDriverListWithPage" :param="queryParam"
                   sort-name="fleet_id" sort-type="asc" :isStartLoad="true"
                   v-if="currentTab.index==tabList[1].val" @pageChangeIndex="pageChangeIndex">
          <template slot-scope="props">
            <Table :columns="driverColumn" :data="props.data" @on-sort-change="props.sortChange"
                   border></Table>
          </template>
        </tablePage>

        <!--车站-->
        <tablePage ref="inspectionTab" :api="getOwnFleetTruckListWithPage" :param="queryParam" sort-name="id"
                   sort-type="asc" :isStartLoad="true" v-if="currentTab.index==tabList[2].val" @pageChangeIndex="pageChangeIndex">
          <template slot-scope="props">
            <Table :columns="truckColumn" :data="props.data" @on-sort-change="props.sortChange"
                   border></Table>
          </template>
        </tablePage>
      </i-col>
    </Row>
  </div>
</template>

<script>
  import tablePage from '@components/table/tablePage.vue'
  import {
    getOwnFleetWithPage,
    getOwnFleetDriverListWithPage,
    getOwnFleetTruckListWithPage,
    assignmentOrder
  } from '@api/backEnd/station'
  import _ from 'lodash'

  export default {
    name: 'stationFleetControl',
    data () {
      let lableName = '车队名称'
      let selectList = []
      let fleetSelectList = []
      let driverSelectList = []
      let truckSelectList = []
      let pageDefault = {
        pageIndex: 1,
        pageSize: 10
      }
      let like = ''
      let tabList = [
        {label: '车队', val: '1'},
        {label: '司机', val: '2'},
        {label: '车辆', val: '3'}
      ]
      let currentTab = {index: '1'}
      let queryParam = {}
      /* 车队字段列表 */
      let fleetColumn = [
        {
          title: '序号',
          width: 100,
          render: (h, params) => {
            let thisIndex = params.row._index + 1
            if (this.pageDefault.pageIndex > 1) {
              thisIndex = thisIndex + (this.pageDefault.pageIndex - 1) * this.pageDefault.pageSize
            }
            return (<span>{thisIndex}</span>)
          }
        },
        // {
        //   title: '标识',
        //   key: 'id'
        //
        // },
        {
          title: '头像',
          key: 'head_ico',
          width: 185,
          render: (h, params) => {
            return h('Avatar', {
              props: {
                src: params.row.head_ico
              }
            })
          }
        },
        {
          title: '车队名称',
          key: 'login_name',
          minWidth: 185
        }
      ]
      /* 司机字段 */
      let driverColumn = [
        {
          title: '序号',
          width: 100,
          render: (h, params) => {
            let thisIndex = params.row._index + 1
            if (this.pageDefault.pageIndex > 1) {
              thisIndex = thisIndex + (this.pageDefault.pageIndex - 1) * this.pageDefault.pageSize
            }
            return (<span>{thisIndex}</span>)
          }
        },
        {
          title: '姓名',
          key: 'driver_name',
          width: 185
        },
        {
          title: '手机号',
          key: 'mobile',
          width: 185
        },
        {
          title: '绑定车辆',
          key: 'truck_no',
          width: 185
        },
        {
          title: '车队名称',
          key: 'fleet_name',
          minWidth: 185
        }
      ]
      /* 车辆字段 */
      let truckColumn = [
        {
          title: '序号',
          width: 100,
          render: (h, params) => {
            let thisIndex = params.row._index + 1
            if (this.pageDefault.pageIndex > 1) {
              thisIndex = thisIndex + (this.pageDefault.pageIndex - 1) * this.pageDefault.pageSize
            }
            return (<span>{thisIndex}</span>)
          }
        },
        {
          title: '车牌号',
          key: 'truck_no',
          width: 185
        },
        {
          title: '车辆类型',
          key: 'truck_type_name',
          width: 185
        },
        {
          title: '车队名称',
          key: 'login_name',
          minWidth: 185
        }
      ]
      /* old code */
      let operatModal = {
        viewDetailShow: false,
        sendNoticeShow: false,
        assignmentOrderShow: false,
        dispatchDriverShow: false,
        viewDetailForFleetShow: false
      }
      let datas = {
        pageDefault,
        lableName,
        selectList,
        fleetSelectList,
        driverSelectList,
        truckSelectList,
        tabList,
        currentTab,
        like,
        queryParam,
        fleetColumn,
        driverColumn,
        truckColumn,
        getOwnFleetWithPage,
        getOwnFleetDriverListWithPage,
        getOwnFleetTruckListWithPage,
        operatModal
      }
      return datas
    },
    computed: {},
    methods: {
      dataRefresh () {
        this.$refs.inspectionTab.dataRefresh()
        this.pageDefault = {
          pageIndex: 1,
          pageSize: 10
        }
      },
      handleSearch () {
        if (this.$refs.selectInput.query !== undefined && this.$refs.selectInput.query !== '' && this.$refs.selectInput.publicValue === undefined) {
          this.$Message.info('无匹配数据')
        }
        this.dataRefresh()
      },
      pageChangeIndex (pageIndex, pageSize) {
        this.pageDefault.pageIndex = pageIndex
        this.pageDefault.pageSize = pageSize
      },
      switchTab () {
        this.queryParam.like = ''
        if (+this.currentTab.index === 1) {
          this.lableName = '车队'
          this.selectList = this.fleetSelectList
        } else if (+this.currentTab.index === 2) {
          this.lableName = '司机/手机号'
          this.selectList = this.driverSelectList
        } else if (+this.currentTab.index === 3) {
          this.lableName = '车牌号'
          this.selectList = this.truckSelectList
        }
        this.$nextTick(() => {
          this.dataRefresh()
        })
      },
      getSelectList () {
        getOwnFleetWithPage({pageNumber: 1, pageSize: 10000}).then(res => {
          if (+res.data.isSuccess === 1) {
            let list = []
            _.forEach(res.data.data.rows, (item) => {
              list.push({'listName': item.login_name, val: item.login_name})
            })
            this.fleetSelectList = list
            this.selectList = this.fleetSelectList
          }
        })
        getOwnFleetDriverListWithPage({pageNumber: 1, pageSize: 10000}).then(res => {
          if (+res.data.isSuccess === 1) {
            let list = []
            _.forEach(res.data.data.rows, (item) => {
              list.push({'listName': item.driver_name + ' - ' + item.mobile, val: item.driver_name})
            })
            this.driverSelectList = list
          }
        })
        getOwnFleetTruckListWithPage({pageNumber: 1, pageSize: 10000}).then(res => {
          if (+res.data.isSuccess === 1) {
            let list = []
            _.forEach(res.data.data.rows, (item) => {
              list.push({'listName': item.login_name + ' - ' + item.truck_no, val: item.truck_no})
            })
            this.truckSelectList = list
          }
        })
      }
    },
    created () {
    },
    watch: {
      'queryParam.like' (val, oldval) {
        if (!val) {
          this.$refs['selectInput'].query = ''
        }
      }
    },
    mounted () {
      this.getSelectList()
    },
    components: {tablePage, assignmentOrder}
  }
</script>

<style scoped>

</style>
